<template>
  <div class="com">
    <ul v-if="list.length > 0">
      <li
        v-for="(item, i) in list"
        :key="i"
        class="com_item"
        @click="getHis(item.word)"
      >
        <a :href="`#/search/detail/${item.word}`">
          <div class="item">
            <div class="l_b">
              <div
                :class="[
                  'num',
                  i == 0 ? 'one' : '',
                  i == 1 ? 'two' : '',
                  i == 2 ? 'three' : '',
                ]"
              >
                {{ i + 1 }}
              </div>
              <div class="info">{{ item.word }}</div>
            </div>
            <div class="r_b up" v-if="item.shift == 1">
              <span><i class="font_family icon-shangsheng"></i></span>
            </div>
            <div class="r_b down" v-else-if="item.shift == -1">
              <span><i class="font_family icon-xia_2"></i></span>
            </div>
            <div class="r_b line" v-else>
              <span><i class="font_family icon-jiangefuhao"></i></span>
            </div>
          </div>
        </a>
      </li>
      <li class="mask_open">
        <a href="">
          <p>打开喜马拉雅APP</p>
          <p>可查看完整热搜榜</p>
        </a>
      </li>
    </ul>

    <div class="load" v-if="list.length == 0">
      <van-loading type="spinner" color="#ff1e00" size="40px" />
    </div>

    <my-footer v-if="list.length > 0"></my-footer>
  </div>
</template>

<script>
import { initSearchBannerListData } from "@/request/api.js";
export default {
  data() {
    return {
      list: [],
      size: 24,
    };
  },
  props: {
    categoryId: {
      type: String,
    },
    categoryName: {
      type: String,
    },
  },
  created() {
    this.initData();
  },
  methods: {
    async initData() {
      // this.isLoading = localStorage.getItem("isLoading");

      let { data: req } = await initSearchBannerListData(
        this.categoryId,
        this.size
      );

      this.list = req.hotWordResultList;

      // let his = [];

      // this.isLoading = false;
      console.log("列表" + name, req);
    },
    getHis(word) {
      let arr = JSON.parse(localStorage.getItem("his"));

      if (arr) {
        arr.forEach((item, i) => {
          if (item == word) {
            arr.splice(i, 1);
          }
        });
      } else {
        arr = [];
      }

      arr.unshift(word);
      localStorage.setItem("his", JSON.stringify(arr));
    },
  },
};
</script>

<style lang="scss" scoped>
.com {
  ul {
    position: relative;
    padding-left: 33px;
    li {
      border-bottom: 1px solid #f3f4f5;
      a {
        display: block;
        .item {
          padding-right: 15px;
          height: 44px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .l_b {
            display: flex;
            align-items: center;
            .num {
              width: 20px;
              font-weight: 500;
              font-size: 16px;
              color: #dabda6;
              text-align: center;
            }
            .num.one {
              font-size: 20px;
              color: #ff0b0b;
            }
            .num.two {
              font-size: 20px;
              color: #f86442;
            }
            .num.three {
              font-size: 20px;
              color: #f8a642;
            }
            .info {
              height: 44px;
              line-height: 44px;
              font-size: 16px;
              font-weight: 500;
              color: #333;
              padding-left: 15px;
              width: 290px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
          .r_b {
            font-size: 12px;
          }
          .r_b.up {
            color: #e44a3b;
          }
          .r_b.down {
            color: #93cc48;
          }
          .r_b.line {
            color: #dededf;
          }

          .r_b {
            i {
              font-size: 17px;
              font-weight: 700;
            }
          }
        }
      }
    }

    .com_item:nth-last-child(-n + 5) {
      filter: blur(5px);
    }

    .mask_open {
      padding-top: 50px;
      position: absolute;
      left: 0;
      bottom: 0;
      height: (4 * 44px);
      background-color: rgba(0, 0, 0, 0.7);
      width: 100%;

      a {
        display: block;
        p {
          font-size: 14px;
          color: #fff;
          text-align: center;
          padding-bottom: 20px;
        }
      }
    }
  }

  .load {
    margin-top: 150px;
    text-align: center;
  }
}
</style>

